<template>
  <div id="app">
    <InformationWindow />
    <AppTimeVue />
    <FloatWindowVue :todos="Todos" v-if="isShow" />
    <HelloTodoListVue msg="欢迎使用TodoList" />
    <div class="cantainer">
      <TodoListTopVue ref="re" />
      <TodoListCenterVue :todo="Todos" :todoArr="Todos" />
      <TodoListFooterVue
        :todoArr="Todos"
        :checkIsDone="checkIsDone"
        @deleteSelect="deleteAllSelect"
      />
    </div>
  </div>
</template>

<script>
import InformationWindow from "./components/InformationWindow.vue";
import AppTimeVue from "./components/Time.vue";
import HelloTodoListVue from "./components/HelloTodoList.vue";
import TodoListTopVue from "./components/TodoListTop.vue";
import TodoListCenterVue from "./components/TodoListCenter.vue";
import TodoListFooterVue from "./components/TodoListFooter.vue";
import FloatWindowVue from "./components/FloatWindow.vue";

export default {
  name: "App",
  components: {
    HelloTodoListVue,
    TodoListTopVue,
    TodoListCenterVue,
    TodoListFooterVue,
    AppTimeVue,
    FloatWindowVue,
    InformationWindow,
  },
  data() {
    return {
      Todos: JSON.parse(localStorage.getItem("todos")) || [],
      //这个isShow是右击的浮动窗口的是否显示
      isShow: false,
    };
  },
  methods: {
    //添加事件
    re(x) {
      this.Todos.unshift(x);
    },
    //检查是否勾选
    checkDone(t) {
      this.Todos.forEach((item) => {
        if (item.id === t) {
          item.done = !item.done;
        }
      });
    },
    //删除元素
    //这个是li里面的删除的按钮
    removeObj(id) {
      //t 是一个ID
      this.Todos = this.Todos.filter((t) => t.id !== id);
    },
    checkIsDone(v) {
      if (v) {
        this.Todos.forEach((item) => (item.done = true));
      } else {
        this.Todos.forEach((item) => (item.done = false));
      }
    },
    //footer部分的一键删除
    deleteAllSelect() {
      this.Todos = this.Todos.filter((item) => {
        return !item.done;
      });
    },
    findTodos(r) {
      let id = r.id;
      // console.log('查找Todos',r);
      this.Todos.forEach((item) => {
        if (item.id === id) {
          // console.log(item);
        }
      });
    },
    showWindow(e, data) {
      setTimeout(() => {
        this.isShow = true;
      }, 1);
      setTimeout(() => {
        this.$bus.$emit("setWindow", e, data);
      }, 1);
    },
    hideWindow() {
      this.isShow = false;
    },
  },
  mounted() {
    this.$refs.re.$on("re", this.re);
    this.$bus.$on("check", this.checkDone);
    this.$bus.$on("delete", this.removeObj);
    this.$bus.$on("sendTimeDate", this.re);
    this.$bus.$on("findTodos", this.findTodos);
    this.$bus.$on("showWindow", this.showWindow);
    this.$bus.$on("hideWindow", this.hideWindow);
  },
  beforeDestroy() {
    this.$bus.$off("check");
    this.$bus.$off("delete");
    this.$bus.$off("sendTimeDate");
    this.$bus.$off("findTodos");
    this.$bus.$off("showWindow");
    this.$bus.$off("hideWindow");
  },
  watch: {
    Todos: {
      deep: true,
      handler(value) {
        localStorage.setItem("todos", JSON.stringify(value));
      },
    },
  },
};
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  .cantainer {
    width: 800px;
    height: 600px;
    background-color: white;
    border-radius: 5px;
    border: 1px #eee solid;
    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
    padding: 5px 10px;
  }
}
</style>
